<template>
  <div>
    <a-affix :offset-top="0">
      <a-row>
        <a-col :span="2">
          <div class="home">
            <nuxt-link to="/"
              ><a-icon
                type="home"
                :style="{ fontSize: '3rem', color: '#1890ff' }"
            /></nuxt-link>
          </div>
        </a-col>

        <a-col :span="16">
          <a-menu v-model="current" mode="horizontal" @click="hadernav">
            <a-menu-item key="mail"> <a-icon type="mail" />Vue </a-menu-item>
            <a-menu-item key="alipay1">
              <a
                href="https://antdv.com"
                target="_blank"
                rel="noopener noreferrer"
                >uni-app</a
              >
            </a-menu-item>
            <a-menu-item key="app" disabled>
              <a-icon type="appstore" /> react
            </a-menu-item>
            <a-sub-menu>
              <span slot="title" class="submenu-title-wrapper"
                ><a-icon type="setting" />Node</span
              >
              <a-menu-item-group>
                <a-menu-item key="setting:1"> Express </a-menu-item>
                <a-menu-item key="setting:2"> Nest.JS </a-menu-item>
              </a-menu-item-group>
              <a-menu-item-group title="其他">
                <a-menu-item key="setting:3"> 多线程 </a-menu-item>
              </a-menu-item-group>
            </a-sub-menu>
            <a-menu-item key="alipay77"> 内容管理 </a-menu-item>
            <a-menu-item key="电子书">
              <a-icon type="mail" />电子书
            </a-menu-item>
            <a-menu-item key="写文章">
              <!-- target="_blank" rel="noopener noreferrer" -->
              <a href="/md">写文章</a>
            </a-menu-item>
          </a-menu>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input-search
              placeholder="全文收索"
              enter-button
              :allowClear="true"
              @search="onSearch"
            />
          </div>
        </a-col>
      </a-row>
    </a-affix>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ['mail'],
    }
  },
  methods: {
    hadernav({ item, key, keyPath }) {
      // console.log({ item, key, keyPath })
      // this.$router.push('/details/blog')
    },
    onSearch(data) {
      // this.$router.push('/md')

      this.$router.push({
        path: '/details/search',
        query: { qs: encodeURIComponent(data) },
      })
    },
  },
}
</script>

<style scoped>
.ant-row {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #fff;
}
.home {
  display: flex;
  justify-content: center;
}
</style>
